import React, {Component} from 'react';

import styles from './Gift.css';
import {Link, Redirect} from "react-router-dom";
import {message} from "antd";
import PointService from "../business/point/PointService";
import GiftPros from "./pros/GiftPros";
import {GiftGoodsDomain} from "../business/gift/GiftGoodsDomain";


class Gift extends Component<GiftPros,any>{


  constructor(props) {
    super(props);
    this.state={redirect:false,gift:new GiftGoodsDomain()};
    this.pointService = new PointService();
    this.exchangeCheck = this.exchangeCheck.bind(this);
    this.showExchangeAndLoss = this.showExchangeAndLoss.bind(this);
    this.rendGift = this.rendGift.bind(this);
    this.checkPoint = this.checkPoint.bind(this);

  }
  pointService:PointService;

  showExchangeAndLoss(gift){
    if(gift.goodsQuantity == 0){
      return (
        <div className={styles.item_state}>
          <p className={styles.state_text} >该产品暂时缺货，请耐心等待</p>
          <a className={[styles["mod-btn"],styles["mod-btn-disabled-blue"]].join(' ')} href="javascript:void(0)">产品缺货</a>
        </div>
      );
    }else{
      return (
        <div className={styles.item_state}>
          <p className={styles.state_text} dangerouslySetInnerHTML={{__html:gift.goodsName}}></p>
          <Link className={styles["mod-btn"]} to="/point-shopping" onClick={(e)=>this.exchangeCheck(e,gift)}>立即兑换</Link>
        </div>
      );
    }
  }

  checkPoint(res,isSuccess,gift:GiftGoodsDomain){

    if(isSuccess && res.code == '200'){
      if(gift.goodsPoints > res.data){
        message.info("抱歉,您当前的积分不够兑换礼品");
      }else{
        this.setState({ redirect:true,gift:gift});
      }
    }else{
      message.info(res.message);
    }
  }

  exchangeCheck(e,gift:GiftGoodsDomain){
    if(gift.goodsQuantity == 0){
      message.info("该产品暂时缺货，请耐心等待");
    }
    let loginToken = sessionStorage.getItem("loginToken");
    let username = sessionStorage.getItem("username");

    if(loginToken!=undefined && loginToken !='' &&username!=undefined && username !='' ){
      this.pointService.queryPoint(username,gift,loginToken,this.checkPoint)
    }else{
      message.info("您还没有登陆或登陆超时，请重新登陆");
    }
    e.preventDefault();
  }

  rendGift(gifts,userPoint:number){
    if(gifts ==undefined){
      return '';
    }else{
      return gifts.map((gift,index)=>{
        return (
          <li className={styles.itemlist_item} key={index}>
            <Link to={{pathname:"/point-shopping/GiftDetail",
              state:{
                gift:gift,
                userPoint:userPoint,
              }
            }}>
              <div className={styles.item_pic}>
                <img src={process.env.POINT_SHOPPING_URL+"/point-shopping/goods/show/"+gift.goodsImageName}/**{gift.imgUrl}*/ alt=""/>
              </div>
              <p className={styles.item_name} dangerouslySetInnerHTML={{__html:gift.goodsName}}></p>
              {/*<div className={styles["flag-hot"]}></div>*/}
            </Link>
            <p className={styles.item_content}>积分<span className={styles.item_cost} dangerouslySetInnerHTML={{__html:gift.goodsPoints}}></span>已兑换<span
              className={styles.item_exchangednum} dangerouslySetInnerHTML={{__html:gift.exchangeCount}}></span>个
            </p>
            {this.showExchangeAndLoss(gift)}
          </li>
        );
      });
    }

  };

  render() {
    const {gifts,userPoint} =this.props;
    if(this.state.redirect){
      return (<Redirect to={
        {
          pathname :"/point-shopping/GiftDetail",
          state : {
            gift:this.state.gift,
            userPoint:userPoint,
          },
        }
      }
      />);
    }
    return (
      <div className={[styles.section,styles["section-sort"]].join(' ')}>
        <div className={styles.section_shop}>
          <ul className={styles["mod-itemlist-shop"]}>
            {this.rendGift(gifts==undefined?undefined:gifts,userPoint)}
          </ul>
        </div>
      </div>
    );
  }
}


export default Gift;
